<template>
  <div>
    <div class="title flex items-center justify-between">
      <div class="flex  items-center">
        <div class="text-[20px]">
          快捷操作
        </div>

      </div>


    </div>

    <div class="module mt-[20px] ">


      <div class="flex justify-between mt-[15px] flex-wrap">

        <div v-for="(item,index) in tabs" :key="index" class="w-[100px] rounded-[8px] relative" @click="handleBtnClick({type:'jump',item})" :class="index>3 ? 'mt-[50px]' : 'mt-[15px]'">
            <div class="flex-center">
              <div class="w-[43px] h-[43px] bg" :style="`background-image:url(${ item.icon })`">

              </div>
            </div>


          <div class="mt-[10px] text-[#101010]  flex-center">
            {{  item.name  }}
          </div>

        </div>

      </div>

    </div>

  </div>
</template>
<script setup lang="ts">

import router from "@/router";

const tabs = ref([
  {
    name:"新增商品",
    icon:"https://img.alicdn.com/imgextra/i3/801089336/O1CN01v2maPK2IpwkkmQ41L_!!801089336.png",
    router:"/product/product/addProduct?type=1"
  },
  {
    name:"订单查询",
    icon:"https://img.alicdn.com/imgextra/i4/801089336/O1CN01Lstsrz2IpwklRcwBE_!!801089336.png",
    router:"/trade/order/order"
  },
  {
    name:"广告数据",
    icon:"https://img.alicdn.com/imgextra/i1/801089336/O1CN01HEOu2X2IpwklDMdpA_!!801089336.png",
    router:"/ad/analysis/roi"
  },
  {
    name:"访问数据",
    icon:"https://img.alicdn.com/imgextra/i1/801089336/O1CN01YiUmki2Ipwkkvie2r_!!801089336.png",
    router:"/website/visit/record"
  },
  {
    name:"商品分析",
    icon:"https://img.alicdn.com/imgextra/i2/801089336/O1CN01HMk0mj2IpwkkJP2xi_!!801089336.png",
    router:"/statistics/analysis/product"
  }
])

const handleBtnClick = e => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  jump({item}){
    router.push(item.router)
  }
}
onMounted(() => {

})

</script>
<style lang="scss" scoped>
.module-li {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);

}

:deep(.el-card__body) {
  padding: 0;
}

.tab {
  .tab-li {
    border: solid 1px #E4E4E4;
    color: #666666;
    background: #FAFAFA;
    padding: 0 20px;
    height: 36px;

    &:nth-of-type(1) {
      border-radius: 8px 0 0 8px;
    }

    &.active {
      border: solid 1px #3721FF;
      color: #3721FF;
      background: #EFEEFF;
    }

    &:nth-last-of-type(1) {
      border-left: solid 0px #E4E4E4;
      border-radius: 0 8px 8px 0;
    }
  }

}
</style>
